<template>
  <div class="hot">
    <h3>热搜榜</h3>
    <van-row type="flex" justify="space-between" class="hot_search">
      <van-col
        class="van-ellipsis"
        span="11"
        v-for="(item, index) in hots"
        :key="index"
        @click="hot(item.first)"
        ><span class="index">{{ index + 1 }}</span>
        <span>{{ item.first }}</span></van-col
      >
    </van-row>
  </div>
</template>

<script>
export default {
  name: "MusicSearchHot",
  props: ["hots"],
  data() {
    return {};
  },

  mounted() {},

  methods: {
    hot(hot) {
      this.$parent.onSearch(hot);
    },
  },
};
</script>

<style lang="less" scoped>
.hot {
  min-height: 100%;
}
h3 {
  margin: 0 .9375rem;
  height: 1.875rem;
  line-height: 1.875rem;
  text-align: left;
  font-weight: bold;
  color: red;
  opacity: .88;
}
.hot_search {
  padding: .625rem;
  padding-top: 0;
  padding-bottom: 0;
  margin: 0 .9375rem;
  border-radius: .9375rem;
  .index {
    display: inline-block;
    line-height: 2.1875rem;
    height: 2.1875rem;
    width: 1.875rem;
    text-align: center;
  }
  .van-col {
    height: 2.1875rem;
    line-height: 2.1875rem;
    text-align: left;
    font-size: 1rem;
  }
}
.van-col:nth-child(1) {
  color: red;
}
.van-col:nth-child(2) {
  color: #34c37e;
}
.van-col:nth-child(3) {
  color: #34c37e;
}
.van-col:nth-child(4) {
  color: #34c37e;
}
</style>